<template>
  <div class="lineChart" id="lineChart"></div>
</template>

<script>
import * as echarts from "echarts/core";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  VisualMapComponent,
  MarkAreaComponent,
} from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  VisualMapComponent,
  MarkAreaComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
]);

export default {
  name: "lineChart",
  components: {},
  props: {
    data: {
      type: Object,
      default: () => {},
    },
    title: {
      type: String,
      default: "",
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  mounted() {
    this.init();
  },
  data() {
    return {};
  },
  methods: {
    init() {
      const chartDom = document.getElementById("lineChart");
      const myChart = echarts.init(chartDom);
      const data = [
        300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500,
        600, 750, 800, 700, 600, 400,
      ];
      const dataX = [
        "00:00",
        "01:15",
        "02:30",
        "03:45",
        "05:00",
        "06:15",
        "07:30",
        "08:45",
        "10:00",
        "11:15",
        "12:30",
        "13:45",
        "15:00",
        "16:15",
        "17:30",
        "18:45",
        "20:00",
        "21:15",
        "22:30",
        "23:45",
      ];
      const option = {
        title: {
          // text: "Distribution of Electricity",
          // subtext: "Fake Data",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
          formatter: "{b} <br> XXXXXX：{c}",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: dataX,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}w",
          },
          axisPointer: {
            snap: true,
          },
        },
        visualMap: {
          show: false,
          type: "continuous",
          dimension: 0,
          min: 0,
          max: data.length - 1,
        },
        series: [
          {
            name: "金额",
            type: "line",
            smooth: true,
            data,
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  computed: {},
};
</script>

<style scope lang="less">
.lineChart {
  width: 100%;
  height: 90%;
}
</style>
